<template>
  <div class="app-container">
    <el-card class="card-format">
      <div slot="header" class="card-title">
        地区信息
      </div>

      <el-form v-if="ready">
        <el-form-item label="用户数">{{ devices.length }}</el-form-item>
        <el-form-item label="总用水量">{{ totalUsage }}</el-form-item>
      </el-form>
    </el-card>

    <el-card class="card-format">
      <div slot="header" class="card-title">
        位置信息
      </div>

      <div class="map-container">
        <Map :devices="devices" v-if=ready></Map>
      </div>
    </el-card>

    <!-- <el-card class="card-format">
      <div slot="header" class="card-title">
        地区月用水量柱状图
      </div>

      <div id="barChart" style="width: 100%;height: 40vh;"></div>
    </el-card> -->
  </div>
</template>

<script>
import Map from '@/components/Map'
import echarts from 'echarts'

import { getGroupLocation } from '@/api/devices'

export default {
  name: 'MeterArea',

  components: {
    Map
  },

  data() {
    return {
      devices: null,
      ready: false
    }
  },

  computed: {
    totalUsage() {
      return this.devices.reduce((prev, cur) => {
        return prev + parseFloat(cur.sensors[2].value)
      }, 0)
    },
    options() {
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          }
        }]
      }
      return option
    }
  },

  created() {
    this.fetchLocation()
  },

  mounted() {
    this.draw()
  },

  methods: {
    fetchLocation() {
      getGroupLocation().then(response => {
        this.devices = response.data.items.devices
        this.ready = true
      })
    },
    draw: () => {
      let chartLine = echarts.init(document.getElementById('barChart'))
      chartLine.setOption(this.options)
    }
  }
}
</script>

<style>

</style>